<template>
    <view class="ganzhi-containter">
      <view class="info">
        <view class="score-box">
          <view class="title">天干留意：</view>
          <view class="score">
            <template v-for="item in tianganliuyi">
              <span>{{item}};</span>
            </template>
          </view>
        </view>
      </view>
      <view class="info">
        <view class="score-box">
          <view class="title">地支留意：</view>
          <view class="score">
            <template v-for="item in dizhiliuyi">
              <span>{{item}};</span>
            </template>
          </view>
        </view>
      </view>
      <view class="info">
        <view class="score-box">
          <view class="title">大运神煞：</view>
          <view class="score">
            <template v-for="item in dayunShensha">
              <span>{{item}};</span>
            </template>
          </view>
        </view>
      </view>
      <view class="info">
        <view class="score-box">
          <view class="title">流年神煞：</view>
          <view class="score">
            <template v-for="item in liunianShensha">
              <span>{{item}};</span>
            </template>
          </view>
        </view>
      </view>
      <view class="info">
        <view class="score-box">
          <view class="title">流月神煞：</view>
          <view class="score">
            <template v-for="item in liuyueShensha">
              <span>{{item}};</span>
            </template>
          </view>
        </view>
      </view>
      <view class="info">
        <view class="score-box">
          <view class="title">流日神煞：</view>
          <view class="score">
            <template v-for="item in liuriShensha">
              <span>{{item}};</span>
            </template>
          </view>
        </view>
      </view>
    </view>
</template>
<script>
  import {
    getShenshaApi
  } from "@/http/api"
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      },
      dayun: {
        type: Object,
        default: {}
      },
      liunian: {
        type: Object,
        default: {}
      },
      liuyue: {
        type: Object,
        default: {}
      },
      liuri: {
        type: Object,
        default: {}
      }
    },
    computed: {
      tianganliuyi: function() {
        if (this.selectedDayun.tianGanAttention && this.selectedLiunian.tianGanAttention && this.selectedLiuyue.tianGanAttention && this.selectedLiuri.tianGanAttention) {
          let tem = [...this.selectedDayun.tianGanAttention, ...this.selectedLiunian.tianGanAttention, ...this.selectedLiuyue.tianGanAttention, ...this.selectedLiuri.tianGanAttention ]
          let arr = Array.from(new Set(tem))
          return arr          
        }
        return []
      },
      dizhiliuyi: function() {
        if (this.selectedDayun.diZhiAttention && this.selectedLiunian.diZhiAttention && this.selectedLiuyue.diZhiAttention && this.selectedLiuri.diZhiAttention) {
          let tem = [...this.selectedDayun.diZhiAttention, ...this.selectedLiunian.diZhiAttention, ...this.selectedLiuyue.diZhiAttention, ...this.selectedLiuri.diZhiAttention ]
          let arr = Array.from(new Set(tem))
          return arr          
        }
        return []
      }
    },
    watch: {
      dayun: {
        handler(newVal) {
          this.selectedDayun = newVal;
        },
        deep: true
      },
      liunian: {
        handler(newVal) {
          this.selectedLiunian = newVal;
        },
        deep: true
      },
      liuyue: {
        handler(newVal) {
          this.selectedLiuyue = newVal;
        },
        deep: true
      },
      liuri: {
        handler(newVal) {
          this.selectedLiuri = newVal;
          this.getShensha('dayun');
          this.getShensha('liunian');
          this.getShensha('liuyue');
          this.getShensha('liuri');
        },
        deep: true
      }
    },
    data() {
      return {
        baziResult: this.result,
        selectedDayun: this.dayun,
        selectedLiunian: this.liunian,
        selectedLiuyue: this.liuyue,
        selectedLiuri: this.liuri,
        dayunShensha: [],
        liunianShensha: [],
        liuyueShensha: [],
        liuriShensha: [],
        tiangan: {
          "甲": "jia",
          "乙": "yi",
          "丙": "bing",
          "丁": "ding",
          "戊": "wu",
          "己": "ji",
          "庚": "geng",
          "辛": "xin",
          "壬": "ren",
          "癸": "gui"
        },
        dizhi: {
          "子": "zi",
          "丑": "chou",
          "寅": "yin",
          "卯": "mao",
          "辰": "chen",
          "巳": "si",
          "午": "wu",
          "未": "wei",
          "申": "shen",
          "酉": "you",
          "戌": "xu",
          "亥": "hai"
        }
      }
    },
    methods: {
      getShensha(type) {
        getShenshaApi({
          "baZiMap": {
            "shi": [ this.tiangan[this.baziResult.timeGan], this.dizhi[this.baziResult.timeZhi] ],
            "ri": [ this.tiangan[this.baziResult.dayGan], this.dizhi[this.baziResult.dayZhi] ],
            "yue": [ this.tiangan[this.baziResult.monthGan], this.dizhi[this.baziResult.monthZhi] ],
            "nian": [ this.tiangan[this.baziResult.yearGan], this.dizhi[this.baziResult.yearZhi] ],
            "dayun": [ this.tiangan[this.selectedDayun.ganZhi[0]], this.dizhi[this.selectedDayun.ganZhi[1] ]],
            "liunian": [ this.tiangan[this.selectedLiunian.ganZhi[0]], this.dizhi[this.selectedLiunian.ganZhi[1] ]],
            "liuyue": [ this.tiangan[this.selectedLiuyue.ganZhi[0]], this.dizhi[this.selectedLiuyue.ganZhi[1] ]],
            "liuri": [ this.tiangan[this.selectedLiuri.ganZhi[0]], this.dizhi[this.selectedLiuri.ganZhi[1] ]]
          },
          "key": type
        }).then(res => {
          if (res.code == 200) {
            this[type+'Shensha'] = res.data
          }else{
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ganzhi-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 52rpx;
    background: rgba(216, 216, 216, 0.1);
    margin-top: 24rpx;
  
    .score-box {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
  
      .title {
        color: #2C2C2C;
        width: fit-content;
        white-space: nowrap;
        font-size: 28rpx;
        font-weight: bold;
      }
  
      .score {
        font-size: 24rpx;
        margin: 0 30rpx 0 10rpx;
      }
    }
  }
</style>